<!DOCTYPE html>
<html>

<head>
    <title>万源中学钱学森班</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        .container {
            display: grid;
            width: 100%;
            grid-template-rows: auto 1fr;
            grid-template-columns: 1fr;
            max-width: 1200px;
            margin: 0 auto;
            font-family: "楷体";
            scroll-behavior: smooth;
        }

        .headerContainer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            background-color: #f8f9fa;
        }

        .logoAndTitle {
            display: flex;
            align-items: center;
        }

        .logoImage {
            height: 100px;
            margin-right: 20px;
            cursor: pointer;
        }

        .slogan {
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }

        .navLinks {
            display: flex;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .navLinks li {
            margin: 0 15px;
        }

        .navLinks a {
            text-decoration: none;
            color: #007bff;
            font-size: 18px;
            scroll-behavior: smooth;
        }

        .contentContainer {
            padding: 20px;
            text-align: left;
        }


        .articleContainer h2 {
            text-align: center;
            /* 标题居中 */
        }

        .articleContainer img {
            width: 50%;
            text-align: center;
        }

        .articleInfo {
            color: gray;
            text-align: center;
            /* 文章信息居中 */
        }

        .articleImageContainer {
            text-align: center;
        }

        /* 回到顶部按钮样式 */
        #backToTopBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 99;
            font-size: 18px;
            border: none;
            outline: none;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            padding: 10px 15px;
            border-radius: 50%;
            transition: background-color 0.3s;
        }

        #backToTopBtn:hover {
            background-color: #0056b3;
        }

        /* 移动端样式 */
        @media screen and (max-width: 768px) {
            .headerContainer {
                flex-direction: column;
                align-items: center;
                padding: 10px;
            }

            .logoAndTitle {
                flex-direction: column;
                align-items: center;
                margin-bottom: 10px;
            }

            .logoImage {
                height: 80px;
                margin-right: 0;
                margin-bottom: 10px;
            }

            .slogan h1 {
                font-size: 24px;
                text-align: center;
            }

            .navLinks {
                flex-direction: column;
                align-items: center;
            }

            .navLinks li {
                margin: 5px 0;
            }

            .navLinks a {
                font-size: 16px;
            }
        }
    </style>

    <link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>

<body>
    <div class="container">
        <div class="headerContainer">
            <div class="logoAndTitle">
                <img src="../img/logo.png" class="logoImage" alt="万源中学钱学森班 Logo"
                    onclick="window.location.href='../index.html'">
                <div class="slogan">
                    <h1 onclick="window.location.href='../index.html'">万源中学钱学森班</h1>
                </div>
            </div>
            <ul class="navLinks">
                <li><a href="../index.html">回到主页</a></li>
            </ul>
        </div>

        <div class="contentContainer">
            <div class="articleContainer">
                <h2>笑声中的成长：一次难忘的英语角色扮演</h2>
                <p class="articleInfo">由李仲轩最后编辑于：2025年2月22日13:37:53 文章作者：DeepSeek 视频提供者：英语魏老师</p>
                <div class="articleImageContainer">
                    <video controls width="50%">
                        <source src="img/classStyleThreads_2025_02_22_01.mp4" type="video/mp4" />
                      </video>                      
                </div>
                <p>昨天下午的英语课上，我们班进行了一场别开生面的角色扮演活动，将原本枯燥的课文演绎得妙趣横生，教室里充满了欢声笑语。</p>
                <p>活动共分为三组，每组都需要对课文内容进行改编和演绎。虽然大家的演技还略显青涩，甚至有些“令人笑掉大牙”，但每个人都全情投入，用夸张的表情、滑稽的动作和充满创意的台词，将角色演绎得活灵活现。</p>
                <p>最让我印象深刻的是第二组的表演，他们将一篇童话课文改编成了一部“喜剧”。原本平淡无奇的情节，被他们加入了“把脉”、“爱情”等元素，剧情跌宕起伏，反转不断，引得台下观众惊呼连连。虽然他们的英语表达并不完美，但天马行空的想象力和幽默风趣的表演，赢得了大家热烈的掌声。
                </p>
                <p>这次角色扮演活动，不仅让我们在轻松愉快的氛围中练习了英语口语，更重要的是，它激发了我们的创造力和团队合作精神。为了呈现出最好的效果，每个小组都进行了精心的准备，从剧本改编到角色分配，从台词设计到动作排练，大家都积极参与，献计献策。
                </p>
                <p>在欢声笑语中，我们不仅加深了对课文的理解，更收获了友谊和成长。这次难忘的经历，让我深刻体会到，学习也可以如此快乐，而快乐的学习，往往能带来意想不到的收获。</p>
            </div>
        </div>

        <!-- 回到顶部按钮 -->
        <button id="backToTopBtn" title="回到顶部">↑</button>
        <hr>
        <p style="color: gray;">©万源中学高2028届钱学森班 2025，保留所有权利。</p>
    </div>

    <script>
        // 回到顶部按钮逻辑
        const backToTopBtn = document.getElementById("backToTopBtn");

        // 当用户滚动页面时显示或隐藏按钮
        window.onscroll = function () {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                backToTopBtn.style.display = "block";
            } else {
                backToTopBtn.style.display = "none";
            }
        };

        // 点击按钮时平滑滚动到顶部
        backToTopBtn.addEventListener("click", function () {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        });
    </script>
</body>

</html>